<script lang="ts" setup>
const input = ref('')
const input1 = ref('')
const input2 = ref('')
const textarea = ref('')
</script>

<template>
  <div>
    <ComponentBasicExampleAlert />
    <page-main title="基础用法" class="demo">
      <el-input v-model="input" placeholder="请输入内容" />
    </page-main>
    <page-main title="禁用状态" class="demo">
      <el-input v-model="input" placeholder="请输入内容" :disabled="true" />
    </page-main>
    <page-main title="可清空" class="demo">
      <el-input v-model="input" placeholder="请输入内容" clearable />
    </page-main>
    <page-main title="密码框" class="demo">
      <el-input v-model="input" placeholder="请输入内容" show-password />
    </page-main>
    <page-main title="带 icon 的输入框" class="demo">
      <el-input v-model="input1" placeholder="请选择日期">
        <template #suffix>
          <el-icon class="el-input__icon">
            <svg-icon name="ep:calendar" />
          </el-icon>
        </template>
      </el-input>
      <el-input v-model="input2" placeholder="请输入内容">
        <template #prefix>
          <el-icon class="el-input__icon">
            <svg-icon name="ep:search" />
          </el-icon>
        </template>
      </el-input>
    </page-main>
    <page-main title="文本域" class="demo">
      <el-input v-model="textarea" type="textarea" :rows="2" placeholder="请输入内容" />
    </page-main>
  </div>
</template>
